<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>计算值</title>
        <style type="text/css">
            :root {
                /* root font size */
                font-size: 20px;
            }

            .first {
                border: 1px solid blue;
            }
        </style>
        <!-- 在 script 元素中嵌入 JavaScript 代码 -->
        <script type="text/javascript">
            // 定义函数
            function show(){
                // 用 CSS选择器 选择 文档 上符合该选择器的 首个元素
                let element = document.querySelector( '.first' );
                // 获得 element 元素上所有 CSS属性的值
                let styles = getComputedStyle( element );
                // 从 styles 中获取 font-size 的值
                console.log( styles.fontSize );
                console.log( styles.height );
            }
        </script>
    </head>
    <body>
        <!-- 当用户鼠标左键点击元素时就会执行 show 函数 -->
        <div class="first" onclick="show()">
            <span>婷婷是个好gu娘</span>
            <p>那位来自甘肃的婷婷的确是个好姑娘</p>
        </div>
    </body>
</html>